<!--
 * @Date: 2023-03-27 15:13:26
 * @LastEditTime: 2023-05-06 09:37:52
 * @FilePath: /nlk/src/views/withdrawCoin/withdrawCoin.vue
 * 介绍:提币
-->
<script lang="ts" setup>
import { PickerColumn, PickerConfirmEventParams, showDialog } from "vant";
import useBalanceStore, { StoreCoinItem } from "@@/store/useBalanceStore";
import { useRpopupRef } from "@@/components/rework/Rpopup";
import { formatNumber, _require } from "@@/utils/tools/tools";
import toast from "@@/hooks/toast";
import { apiWithdrawCoin } from "@@/api/module/balance";
import { checkAuth } from "@@/hooks/sysHooks";
import withdrawCoinLogs from "./components/withdrawCoinLogs.vue";

const { t } = useI18n();
const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

const currentCoinKey = ref(Object.keys(coinEnum.value)[0]);
const currentCoin = computed(() => coinEnum.value[currentCoinKey.value]);
watch(
  currentCoinKey,
  () => {
    balanceStore.findGameBalance(currentCoin.value!);
  },
  { immediate: true }
);
/**picker选择器弹窗 */
const RpopupRef = useRpopupRef();
//*切换coin
function onPickerConfirm(e: PickerConfirmEventParams) {
  const electCoin = e.selectedOptions[0];
  currentCoinKey.value = (electCoin?.value as string).toUpperCase();
  RpopupRef.value?.close();
}
/**picker选择器数据 */
const pickerData = computed<PickerColumn>(() => {
  return Object.values(coinEnum.value).map((v) => ({
    ...v,
    text: v?.code,
    value: v?.code,
  }));
});

const formData = reactive({
  amount: "",
});
function onSubmit() {
  const amount = Number(formData.amount);
  const coin = currentCoin.value!;
  if (!(amount > 0))
    return toast.text(`${t("bu-neng-xiao-yu")}: 0${coin.code}`);

  const USDT = coinEnum.value.USDT!;
  checkAuth(["NLK","NLKS"].includes(coin.code) ? USDT : coin).then(async () => {
    toast.loading();
    const balance = await balanceStore.findGameBalance(coin);
    toast.close();
    if (!(amount <= balance!)) return toast.text(t("yu-e-bu-zu"));
    withdrawCoin(coin, amount);
  });
}
/**发起提币 */
function withdrawCoin(coin: CoinInfo, amount: number) {
  showDialog({
    title: t("qing-que-ren"),
    message: `${t("ti-bi-shu-liang")} : ${amount}${coin?.code}`,
  }).then(() => {
    if (!window.isBnb) return toast.text(t("zan-wei-zhi-chi-ci-lian"));
    apiWithdrawCoin({ coin_id: coin.id, number: amount });
  });
}
</script>

<template>
  <CpageView class="coinExchange">
    <div class="auto-MT-md">
      <div class="flex-J-SB T-S-sm">
        <div>{{ $t("jie-shou") }}</div>
        <div>
          {{ $t("yu-e") }}<span>:</span>
          {{ formatNumber(currentCoin?.gameBalance, 4) }}
        </div>
      </div>
      <Ccard
        @click="RpopupRef?.open()"
        bg="var(--C-B2)"
        class="border-dashed active flex-J-SB flex-A-C"
      >
        <div class="flex-A-C">
          <Rimage height="60rem" width="60rem" :src="currentCoin?.logo" />
          <span class="ML-xs">{{ currentCoin?.code }}</span>
        </div>
        <Ricon r-name="icon-xiajiantou" />
      </Ccard>
      <div class="T-S-sm">
        <div>{{ $t("shu-liang") }}</div>
      </div>
      <Ccard bg="var(--C-B2)" class="border-dashed flex-J-SB flex-A-C">
        <VanField
          v-model="formData.amount"
          :placeholder="$t('ti-bi-shu-liang')"
        >
          <template #extra> {{ currentCoin?.code }}</template>
        </VanField>
      </Ccard>
      <VanButton
        @click="onSubmit"
        class="MT-lg"
        color="var(--C-success)"
        :size="'large'"
        block
      >
        {{ $t("que-ren") }}
      </VanButton>
      <withdrawCoinLogs />
    </div>
    <Rpopup ref="RpopupRef" :position="'bottom'">
      <van-picker
        @confirm="onPickerConfirm"
        @cancel="RpopupRef?.close"
        :title="$t('qing-xuan-ze')"
        :columns="pickerData"
      >
        <template #option="{ code, logo }: StoreCoinItem">
          <div class="flex-A-C flex-J-SB" style="width: 5em">
            <Rimage width="1.2em" height="1.2em" :src="logo" />
            <div class="T-A-C" style="width: 3em">{{ code }}</div>
          </div>
        </template>
      </van-picker>
    </Rpopup>
  </CpageView>
</template>

<style lang="less" scoped>
.border-dashed {
  border: dashed 1rem var(--C-T1);
}
</style>
